<template>
  <div class="particulars-wrapper">
    <common-back :content="title"></common-back>
    <van-loading class="v-loading"
                 size="30px"
                 color="white"
                 v-show="loading" />
    <common-scroll ref="scroll"
                   class="scroll"
                   :listenScroll="listenScroll"
                   @pullingUp="handlePullUp"
                   :data="list"
                   v-if="list.length">
      <div class="scroll-content">
        <ul class="list">
          <li class="item"
              border-bottom-1px
              v-for="item of list"
              :key="item.id">
            <div class="left">
              <div class="use">
                <div class="desc">{{item.data_src}}</div>
              </div>
              <div class="time">
                <span class="year">{{item.unfreezetime}}</span>
                <!-- <span class="hour"> 08:56:01</span> -->
              </div>
            </div>
            <div class="right"
                 :class="{gray: item.money_type ==='-'}">{{item.money_type}}{{item.money}}</div>
          </li>
        </ul>
        <load-more v-show="loadMore"
                   :title="loadMoreTitle"></load-more>
      </div>
    </common-scroll>
  </div>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonScroll from 'common/scroll/scroll'
import LoadMore from 'common/loadMore/loadmore'
export default {
  name: 'walletparticulars',
  components: {
    CommonBack,
    CommonScroll,
    LoadMore
  },
  data () {
    return {
      title: '资金明细',
      page: 1,
      list: [],
      total: 0,
      loadMore: false, // 加载更多
      loadMoreTitle: '加载中...',
      loading: true
    }
  },
  created () {
    this.getParticulars()
    this.listenScroll = true
  },
  methods: {
    getParticulars () {
      const page = this.page
      this.$api.me.particulars({ page })
        .then(this.getParticularsSucc)
        .catch((e) => {
          this.$errorTip()
          this.loading = false
        })
    },
    getParticularsSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        console.log(data)
        this.list = this.list.concat(data.flow.wallet)
        this.total = data.flow.total
        this.loadMore = false
        this.loading = false
      }
    },
    // 上拉加载更多
    handlePullUp () {
      this.loadMore = true
      const flag = this.judge()
      if (flag) {
        this.page += 1
        this.getParticulars()
      } else {
        this.loadMoreTitle = '没有更多'
      }
      this.$refs.scroll.refresh()
      this.$refs.scroll.finishPullUp()
    },
    // 判断总条数是否大于列表长度
    judge () {
      const total = this.total
      const length = this.list.length
      return total > length
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.particulars-wrapper
  initPosition()
  background-color $common_bgc
  z-index 30

.scroll
  top 88px

  .list
    width 100%
    padding-top 5px
    box-sizing border-box

    li
      width 100%
      display flex
      justify-content center
      align-items center
      padding-top 30px
      padding-bottom 30px
      padding-left 24px
      padding-right 24px
      box-sizing border-box

      .left
        flex 1
        min-width 0
        margin-right 15px

        .use
          width 100%
          min-width 0
          margin-bottom 14px

          .desc
            font-size $shop_name
            width 100%
            ellipsis()
            line-height $shop_name
            font-weight 500
            color $order_content

        .time
          font-size $address
          left $address
          font-weight 400
          color $original_price
          display flex

          span
            &:nth-of-type(1)
              margin-right 30px

      .right
        font-size 58px
        font-weight 400
        color #0FBF4A

      .gray
        color #525252

.v-loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  z-index 100
  padding-left 10px
  padding-right 10px
  padding-top 10px
  padding-bottom 10px
  border-radius 3px
  background-color rgba(0, 0, 0, 0.5)
</style>
